@import '../../scss/styles.scss';

@layer payload-default {
  .LexicalEditorTheme {
    &__ltr {
      text-align: left;
    }

    &__rtl {
      text-align: right;
    }

    &__paragraph {
      font-size: base(0.8);
      margin-bottom: 0.55em;
      position: relative;
      line-height: 1.5;
      letter-spacing: normal;
    }

    // No bottom margin for last paragraph in editor. This also created nice animations when adding a new line at the end
    .ContentEditable__root {
      font-size: base(0.8);
    }

    &__quote {
      font-size: base(0.8);
      margin-block: base(0.8);
      margin-inline: base(0.2);
      border-inline-start-color: var(--theme-elevation-150);
      border-inline-start-width: base(0.2);
      border-inline-start-style: solid;
      padding-inline-start: base(0.6);
      padding-block: base(0.2);
    }

    &__h1 {
      font-size: base(1.4);
      font-weight: 700;
      margin-block: 0.5em 0.4em;
      line-height: base(1.2);
      letter-spacing: normal;
    }

    &__h2 {
      font-size: base(1.25);
      font-weight: 700;
      margin-block: 0.55em 0.4em;
      line-height: base(1.2);
      letter-spacing: normal;
    }

    &__h3 {
      font-size: base(1.1);
      font-weight: 700;
      margin-block: 0.6em 0.4em;
      line-height: base(1.3);
      letter-spacing: normal;
    }

    &__h4 {
      font-size: base(1);
      font-weight: 700;
      margin-block: 0.65em 0.4em;
      line-height: base(1.4);
      letter-spacing: normal;
    }

    &__h5 {
      font-size: base(0.9);
      font-weight: 700;
      margin-block: 0.7em 0.4em;
      line-height: base(1.5);
      letter-spacing: normal;
    }

    &__h6 {
      font-size: base(0.8);
      font-weight: 700;
      margin-block: 0.75em 0.4em;
      line-height: base(1.5);
      letter-spacing: 0.1em;
    }

    &__indent {
      --lexical-indent-base-value: 40px;
    }

    &__textBold {
      font-weight: bold;
    }

    &__textItalic {
      font-style: italic;
    }

    &__textUnderline {
      text-decoration: underline;
    }

    &__textStrikethrough {
      text-decoration: line-through;
    }

    &__textUnderlineStrikethrough {
      text-decoration: underline line-through;
    }

    &__textSubscript {
      font-size: 0.8em;
      vertical-align: sub !important;
    }

    &__textSuperscript {
      font-size: 0.8em;
      vertical-align: super;
    }

    &__textCode {
      background-color: var(--theme-elevation-50);
      border: 1px solid var(--theme-elevation-150);
      color: var(--theme-error-600);
      padding: base(0.1) base(0.2);
      font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace;
      font-size: 0.875em;
      border-radius: var(--style-radius-s);
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    &__hashtag {
      background-color: rgba(88, 144, 255, 0.15);
      border-bottom: 1px solid rgba(88, 144, 255, 0.3);
    }

    .ContentEditable__root &__link {
      pointer-events: none;
    }

    &__link {
      color: var(--theme-success-750);
      text-decoration: none;
      border-bottom: 1px dotted;
    }

    &__code {
      /*background-color: rgb(240, 242, 245);*/
      font-family: Menlo, Consolas, Monaco, monospace;
      display: block;
      padding: 8px 8px 8px 52px;
      line-height: 1.53;
      font-size: 13px;
      margin: 8px 0;
      tab-size: 2;
      /* white-space: pre; */
      overflow-x: auto;
      position: relative;
    }

    &__code:before {
      content: attr(data-gutter);
      position: absolute;
      /*background-color: #eee;*/
      left: 0;
      top: 0;
      border-right: 1px solid #ccc;
      padding: 8px;
      color: #777;
      white-space: pre-wrap;
      text-align: right;
      min-width: 25px;
    }

    &__characterLimit {
      display: inline;
      background-color: #ffbbbb !important;
    }

    &__ol1 {
      padding: 0;
      list-style-position: outside;
      margin: base(0.4) 0 base(0.8);
    }

    &__ol2 {
      padding: 0;
      margin: 0;
      list-style-type: upper-alpha;
      list-style-position: outside;
    }

    &__ol3 {
      padding: 0;
      margin: 0;
      list-style-type: lower-alpha;
      list-style-position: outside;
    }

    &__ol4 {
      padding: 0;
      margin: 0;
      list-style-type: upper-roman;
      list-style-position: outside;
    }

    &__ol5 {
      padding: 0;
      margin: 0;
      list-style-type: lower-roman;
      list-style-position: outside;
    }

    &__ul {
      padding: 0;
      margin: base(0.4) 0 base(0.8);
      list-style-position: outside;
    }

    &__ul ul {
      margin: 0;
    }

    &__listItem {
      font-size: base(0.8);
      margin: 0 0 0.4em 40px;
    }

    &__listItem[dir='rtl'] {
      margin: 0 40px 0.4em 0;
    }

    &__listItemChecked,
    &__listItemUnchecked {
      position: relative;
      // Instead of having margin-left: 40px like other list-items or indented paragraphs,
      // we use padding-left: 25px + margin-left: 15px = 40px, so that the click position
      // calculation in `CheckListPlugin` matches the checkbox
      margin-left: 15px;
      padding-left: 25px;
      list-style-type: none;
      outline: none;
    }

    // See comment above for why we need this
    &__listItemUnchecked[dir='rtl'],
    &__listItemChecked[dir='rtl'] {
      margin-left: 0;
      padding-left: 0;
      padding-right: 25px;
      margin-right: 15px;
    }

    &__listItemChecked {
      text-decoration: line-through;
    }

    &__listItemUnchecked:before,
    &__listItemChecked:before {
      content: '';
      width: base(0.8);
      height: base(0.8);
      top: base(0.1);
      left: 0;
      cursor: pointer;
      display: block;
      background-size: cover;
      position: absolute;
    }

    &__listItemUnchecked[dir='rtl']:before,
    &__listItemChecked[dir='rtl']:before {
      left: auto;
      right: 0;
    }

    &__listItemUnchecked:focus:before,
    &__listItemChecked:focus:before {
      outline: 0;
      box-shadow: 0 0 3px 3px var(--theme-success-400);
      border: 1px solid var(--theme-elevation-250);
      border-radius: var(--style-radius-s);
    }

    &__listItemUnchecked:before {
      border: 1px solid var(--theme-elevation-250);
      border-radius: $style-radius-s;
    }

    &__listItemChecked:before {
      border: 1px solid var(--theme-elevation-500);
      border-radius: $style-radius-s;
      background-color: var(--theme-elevation-100);
      background-repeat: no-repeat;
    }

    &__listItemChecked:after {
      content: '';
      cursor: pointer;
      border-color: var(--theme-text);
      border-style: solid;
      position: absolute;
      display: block;
      top: 6px;
      width: 3px;
      left: 7px;
      right: 7px;
      height: 6px;
      transform: rotate(45deg);
      border-width: 0 2px 2px 0;
    }

    &__nestedListItem {
      list-style-type: none;
    }

    &__nestedListItem:before,
    &__nestedListItem:after {
      display: none;
    }

    &__tokenComment {
      color: slategray;
    }

    &__tokenPunctuation {
      color: #999;
    }

    &__tokenProperty {
      color: #905;
    }

    &__tokenSelector {
      color: #690;
    }

    &__tokenOperator {
      color: #9a6e3a;
    }

    &__tokenAttr {
      color: #07a;
    }

    &__tokenVariable {
      color: #e90;
    }

    &__tokenFunction {
      color: #dd4a68;
    }

    &__mark {
      background: rgba(255, 212, 0, 0.14);
      border-bottom: 2px solid rgba(255, 212, 0, 0.3);
      padding-bottom: 2px;
    }

    &__markOverlap {
      background: rgba(255, 212, 0, 0.3);
      border-bottom: 2px solid rgba(255, 212, 0, 0.7);
    }

    &__mark.selected {
      background: rgba(255, 212, 0, 0.5);
      border-bottom: 2px solid rgba(255, 212, 0, 1);
    }

    &__markOverlap.selected {
      background: rgba(255, 212, 0, 0.7);
      border-bottom: 2px solid rgba(255, 212, 0, 0.7);
    }

    &__embedBlock {
      user-select: none;
    }

    &__embedBlockFocus {
      outline: 2px solid rgb(60, 132, 244);
    }

    .ContentEditable__root {
      &:first-child {
        margin-top: 0;
      }
    }
  }

  html[data-theme='dark'] {
    .LexicalEditorTheme__textCode {
      color: var(--theme-warning-600);
    }
  }
}
